<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>室内空气指令记录页面</title>
    <script src="../../static/js/chart-3.7.0.min.js"></script>
    <script src="../../static/js/jquery-3.6.4.min.js"></script>
</head>
<body>
<canvas id="MQ2_LineChart"></canvas>
<style>
    /* 定义滚动条的宽度、颜色和圆角 */
    ::-webkit-scrollbar {
        width: 8px; /* 宽度 */
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(93, 95, 191, 0.38); /* 滑块颜色 */
        border-radius: 4px; /* 圆角 */
    }

    ::-webkit-scrollbar-track {
        background-color: rgba(134, 210, 167, 0.2); /* 背景颜色 */
    }

    /* 鼠标悬停在滚动条上时的样式 */
    ::-webkit-scrollbar-thumb:hover {
        background-color: #333; /* 滑块颜色变化 */
    }

    /* Firefox 滚动条样式 */
    html {
        scrollbar-width: thin;
        scrollbar-color: rgba(66, 133, 244, 0.43) #f1f1f1;
    }

    body::-webkit-scrollbar-corner {
        background-color: #f1f1f1;
    }

</style>
<script>
    // 模拟的 Ajax 返回数据
    var jsonData = [];

    // 准备数据
    function prepareData() {
        const labels = jsonData.map(function (item) {
            return new Date(item.time).toLocaleString('en-US', { day: 'numeric',hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false });
        });

        const values = jsonData.map(function (item) {
            return parseFloat(item.value).toFixed(2);
        });

        return { labels, values };
    }

    // 创建折线图
    function createChart() {
        var ctx = document.getElementById('MQ2_LineChart').getContext('2d');
        var chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: '室内最新空气质量',
                    data: [],
                    borderColor: 'rgb(1,25,247)',
                    tension: 0.1,
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        type: 'linear',
                        position: 'bottom'
                    }],
                    yAxes: [{
                        ticks: {
                            min: 0
                        }
                    }]
                }
            }
        });

        return chart;
    }

    // 更新图表数据和重新绘制
    function updateChart(chart) {
        const { labels, values } = prepareData();
        chart.data.labels = labels;
        chart.data.datasets[0].data = values;
        chart.update();
    }

    // 页面加载时创建图表并更新
    $(document).ready(function () {
        var chart = createChart();
        $.ajax({
            type: "get",
            url: "/device/logs",
            data: "deviceId=3&jt=20",
            async: false,
            success: function (data) {
                jsonData = data;
                updateChart(chart);
            }
        });// 刷新时先更新一次数据


        // 定时获取数据并更新图表（这里模拟每5秒获取一次数据）
        setInterval(function () {
            // 模拟的 Ajax 请求获取实时数据
            $.ajax({
                type: "get",
                url: "/device/logs",
                data: "deviceId=3&jt=20",
                async: false,
                success: function (data) {
                    jsonData = data;
                    updateChart(chart);
                }
            });
        },20000); // 5000毫秒（即5秒）更新一次数据
    });
</script>
</body>
</html>
